<template>
  <view v-if="gift || price" :class="['p-fixed-discount', {'is-style2': styleType === 2}]">
    <view v-if="styleType === 1" class="_content">
      <view class="_icon">
        <x-icon name="icon-087" color="#222F65" size="40" />
      </view>
      <view v-if="gift && price" class="_text">
        本单可省
        <text class="_em">{{ price }}</text>
        元，支付后随机返券
      </view>
      <view v-else-if="gift" class="_text">
        本单支付后随机返券
      </view>
      <view v-else-if="price" class="_text">
        当前商品享受到手价，现在下单可省
        <text class="_em">{{ price }}</text>
        元
      </view>
    </view>

    <view v-if="styleType === 2" class="discount-bar">
      <view class="icon">
        <x-image src="/assets/images/icon-envelope.png" />
      </view>
      <view>
        <text>您有</text>
        <text class="amount">{{ price }}元的组合优惠</text>
        <text>，即将失效</text>
      </view>
      <view class="ul countdown">
        <view class="li">{{countdownData.hour}}</view>
        <view class="delimiter">:</view>
        <view class="li">{{countdownData.minute}}</view>
        <view class="delimiter">:</view>
        <view class="li">{{countdownData.second}}</view>
        <x-countdown
          :time="time"
          auto
          @change="handleCountdownChange"
        />
      </view>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';
import XImage from '@/components/x-image';
import XCountdown from '@/components/x-countdown';
import { mapState } from 'vuex';

export default {
  name: 'PFixedDiscount',
  components: {
    XIcon,
    XCountdown,
    XImage
  },
  props: {
    price: {
      type: [Number, null],
      default: 0
    },
    gift: {
      type: [Boolean, Number],
      default: 0
    },
    styleType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      detail: null,
      countdownData: {}
    };
  },
  computed: {
    ...mapState({
      // 页面信息
      pageInfo: state => state['product'].pageDetail
    }),

    time() {
      return this.pageInfo?.remainingSeconds ? this.pageInfo?.remainingSeconds * 1000 : 0;
    }
  },
  created() {},
  methods: {
    handleCountdownChange(res) {
      this.countdownData = res;
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-fixed-discount{
    &.is-style2{
      display: flex;
      justify-content: flex-end;
    }
    ._content{
      height: 80px; background: cdn('/images/pic-034.png') no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; font-size: 30rpx; color: #222F65;
      ._icon{ margin-right: 5px;}
      ._text{
        display: flex; align-items: center;
        ._em{ min-width: 40px; text-align: center; border-radius: 8px; background: linear-gradient(90deg, #606482 0%, #272F54 100%); color: #FFDE88; line-height: 1; padding: 5px 9px; font-weight: bold; margin: 0 2px;}
      }
    }

    .discount-bar{
      display: flex;
      align-items: center;
      padding: 14px 22px;
      margin: 0 24px 16px;
      font-size: 26px;
      border-radius: 30px;
      background: #FFF;
      box-shadow: 0px 0px 16px 0px rgba(176, 23, 23, 0.25);

      .icon{
        width:32px;
        height:32px;
        margin-right: 10px;
      }

      .amount{
        color: #F6531D;
      }

      .countdown{
        display: flex;
        align-items: center;
        color: #F6531D;
        margin-left: 10px;
        .li{
          width:36px;
          text-align: center;
        }

        .li:last-child{
          color: #E8185A;
        }
      }
    }
  }
</style>
